<template>
	<view>
		<!-- 1，背景图片 -->
		<view class="bg-img">
			<image :src="bgImg"></image>
		</view>
		<!-- 2，登录注册按钮 -->
		<view class="btn">

			<view class="btn-box-phone" v-if="isShowQuickLogin">
				<view class="phone">
					<text>{{isShowPhone}}</text>
				</view>
			</view>

			<view class="btn-box btn-wx" @click="loginByIphoneFun" v-if="isShowQuickLogin">
				<view class="btn-box-con">
					<view class="img">
						<image :src="iphoneImg"></image>
					</view>
					<view class="text">
						<text>快捷登录</text>
					</view>
				</view>
			</view>

			<view class="btn-box-phone" v-if="isShowQuickLogin">
				<view class="tips">
					<view class="tip-left"></view>
					<view class="tip-center"><text>or</text></view>
					<view class="tip-right"></view>
				</view>
			</view>


			<view class="btn-box btn-phone" @click="loginByPhone">
				<view class="btn-box-con">
					<view class="img">
						<image :src="sjImg"></image>
					</view>
					<view class="text">
						<text>{{loginText}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="btn-box btn-wx" @click="loginByWx">
				<view class="img">
					<image :src="wxImg"></image>
				</view>
				<view class="text">
					<text>微信登录</text>
				</view>
			</view> -->
			<!-- <view class="btn-box btn-wx" @click="loginByWx">
				<view class="img">
					<image :src="iphoneImg"></image>
				</view>
				<view class="text">
					<text>iPhone快捷登录</text>
				</view>
			</view> -->
		</view>
		<!-- 3，隐私秘钥 -->
		<login-agreement :isChecked="isChecked" @selfChangde="selfChangde" :readTextColor="readTextColor">
		</login-agreement>

		<!-- 4，弹框 -->
		<lyg-popup :policyPath="policyPath" :protocolPath="protocolPath" :showPopup="isShowPopup"
			@popupState="popupState" @confirm="confirm"></lyg-popup>
	</view>
</template>

<script>
	//导入隐私协议组件
	import loginAgreement from '@/components/content/login/login-agreement.vue'

	import lygPopup from '@/components/apk/lyg-popup/lyg-popup.vue'

	import {
		loginByIphone
	} from '@/api/http/login/login.js'

	export default {
		components: {
			loginAgreement,
			lygPopup
		},
		data() {
			return {
				bgImg: require('@/static/img/login/01.jpg'),
				wxImg: require('@/static/img/login/wx.svg'),
				sjImg: require('@/static/img/login/sj.svg'),
				iphoneImg: require('@/static/img/login/iphone.svg'),
				isChecked: false,
				readTextColor: '#fff',
				isShowPopup: true,
				policyPath: '/subpkg/main/my/agree-on/private-xy/private-xy',
				protocolPath: '/subpkg/main/my/agree-on/user-xy/user-xy',
				loginText: '手机号登录',
				isShowQuickLogin: false,
				isShowPhone: '',
				loginPhone: ''
			}
		},
		methods: {
			//1，勾选协议
			selfChangde() {
				this.isChecked = !this.isChecked
			},
			//2，手机号登录
			loginByPhone() {
				if (!this.isChecked) {
					return uni.$showMsg('请勾选隐私协议和用户协议！');
				}
				//跳转登录页面
				uni.navigateTo({
					url: '/pages/login/login/login'
				})

			},
			//3，微信登录
			loginByWx() {
				return uni.$showMsg('暂未开通微信登录服务！');
			},
			//4，确定隐私协议
			confirm() {
				this.isChecked = true
				this.isShowPopup = false
			},
			//5，关闭隐私协议
			popupState() {
				this.isShowPopup = false
			},
			//6，手机号处理
			geTel(tel) {
				var reg = /^(\d{3})\d{4}(\d{4})$/;
				return tel.replace(reg, "$1****$2");
			},

			//7，快捷登录
			quickLogin() {
				var that = this
				if (uni.getSystemInfoSync().platform === 'android') {
					//当前设备为Android
				} else {
					//当前设备为iPhone
					uni.login({
						provider: 'apple',
						success(loginRes) {
							console.log(loginRes.userInfo.openId) //苹果唯一标识
							console.log(loginRes.userInfo.authorizationCode) //手机号

							if (!loginRes.userInfo.authorizationCode || loginRes.userInfo.authorizationCode ==
								null || loginRes.userInfo.authorizationCode == '') {
								that.isShowQuickLogin = false
							}
							that.isShowPhone = that.geTel(loginRes.userInfo.authorizationCode)
							that.isShowQuickLogin = true
							that.loginPhone = loginRes.userInfo.authorizationCode
						},
						fail(err) {
							console.log(err)
						}
					})


				}
			},

			//8，苹果快捷登录
			loginByIphoneFun() {
				loginByIphone(this.loginPhone).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//参数保存
					var busInfo = res.data.busInfo
					uni.setStorageSync('token', busInfo.token);
					uni.setStorageSync('userId', busInfo.userId);
					uni.setStorageSync('nickname', busInfo.nickname);
					uni.setStorageSync('username', busInfo.username);
					uni.setStorageSync('head', busInfo.head);
					uni.setStorageSync('phone', busInfo.phone);
					uni.setStorageSync('gender', busInfo.gender);
					uni.setStorageSync('address', busInfo.address);
					uni.setStorageSync('birthday', busInfo.birthday);

					if (busInfo.authentication && busInfo.authentication == '1') {
						uni.setStorageSync('identifyCheck', true)
					}

					//this.getMsgList(busInfo.userId)

					//跳转到首页
					uni.reLaunch({
						url: '/pages/main/home/home'
					})
				})
			}
		},
		onLoad() {
			//this.quickLogin()
		}
	}
</script>

<style lang="scss" scoped>
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: -9;

		image {
			width: 100%;
			height: 100%;
		}
	}


	.btn {
		position: fixed;
		z-index: 9;
		width: 80%;
		left: 10%;
		bottom: 20%;
		// height: 240rpx;

		.btn-box {
			width: 90%;
			margin-left: 5%;
			margin-bottom: 36rpx;
			// margin-left: 20%;
			border-radius: 60rpx;
			height: 90rpx;


			.btn-box-con {
				display: flex;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);

				.img {
					text-align: right;

					image {
						width: 50rpx;
						height: 50rpx;
						// margin-right: 30rpx;
						margin-top: 20rpx;
					}
				}

				.text {
					// width: 50%;
					margin-left: 10rpx;
					line-height: 90rpx;
					// text-align: center;
					font-size: 32rpx;
				}
			}

		}

	}

	.btn-phone {
		background-color: rgba(10, 163, 71, 1);
		color: #fff;
	}

	.btn-wx {
		background-color: rgba(245, 245, 245, 1);
	}

	.btn-box-phone {
		margin-bottom: 20rpx;

		view {
			text-align: center;
			font-size: 32rpx;

			text {
				color: #fff;
			}
		}

		.tips {
			display: flex;
			height: 50rpx;
			line-height: 50rpx;
			width: 100%;

			.tip-left,
			.tip-right {
				width: 40%;
				height: 1rpx;
				background-color: #F2F2F2;
				margin-top: 23rpx;
			}

			.tip-left {
				margin-left: 3%;
			}

			.tip-center {
				width: 14%;
			}
		}
	}
</style>